package icu.bughub.app.app.ui.screens

import android.util.Log
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.TextFields
import androidx.compose.material3.BottomSheetScaffold
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberBottomSheetScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import icu.bughub.app.app.viewmodel.ArticleViewModel
import icu.bughub.app.webview.WebView
import icu.bughub.app.webview.rememberWebViewState
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ArticleDetailScreen(
    viewModel: ArticleViewModel = viewModel(),
    id: String = "",
    onBack: () -> Unit = {}
) {

    val webViewState =
        rememberWebViewState(data = viewModel.content)

    var fonsStyle by remember {
        mutableStateOf(1.0f)
    }

    var showBottomSheet by remember {
        mutableStateOf(false)
    }

    val scaffoldState = rememberBottomSheetScaffoldState()

    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(Unit) {
        viewModel.fetchArticleInfo(id)
    }

    BottomSheetScaffold(

        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                navigationIcon = {
                    Icon(
                        imageVector = Icons.Default.ArrowBack,
                        contentDescription = "",
                        modifier = Modifier
                            .padding(8.dp)
                            .clickable {
                                onBack()
                            },
                        tint = Color.White
                    )
                },
                actions = {
                    Row {
                        Icon(
                            imageVector = Icons.Default.TextFields,
                            contentDescription = "",
                            tint = Color.White,
                            modifier = Modifier
                                .padding(8.dp)
                                .clickable {
                                    Log.i(
                                        "ArticleDetailScreen",
                                        "onClick: " + scaffoldState.bottomSheetState.isVisible
                                    )
                                    webViewState.evaluateJavascript(
                                        "document.body.style.fontSize = '${fonsStyle}rem'"
                                    )
                                    //todo 点击切换设置文字大小
                                    coroutineScope.launch {
                                        if (showBottomSheet) {
                                            scaffoldState.bottomSheetState.partialExpand()
                                            showBottomSheet = false
                                        } else {
                                            scaffoldState.bottomSheetState.expand()
                                            showBottomSheet = true
                                        }
                                    }
                                }
                        )
                    }
                },
                title = {
                    Text(
                        text = "文章详情",
                        color = Color.White, fontSize = 18.sp,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center
                    )
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color(0xff149ee7),
                    titleContentColor = Color(0xff149ee7),
                ),
                //  modifier = Modifier.statusBarsPadding(),
            )
        },
        modifier = Modifier
            .background(Color.White)
            .statusBarsPadding(),
        sheetContent = {
            Column(modifier = Modifier.padding(8.dp)) {
                Text(text = "字体大小", fontSize = 16.sp, color = Color(0xff333333))
                Slider(
                    colors = SliderDefaults.colors(),
                    value = fonsStyle,
                    onValueChange = {
                        fonsStyle = it
                        //webViewState.pageTitle = ""
                        webViewState.test()
                        webViewState.evaluateJavascript(
                            "document.body.style.zoom = '${it}'"
                        )

                    },
                    steps = 3,
                    valueRange = 0.75f..1.75f,
                )

                Row(
                    horizontalArrangement = Arrangement.SpaceBetween,
                    modifier = Modifier
                        .fillMaxWidth()
                ) {
                    Text(text = "较小", fontSize = 13.sp, color = Color(0xff999999))  //0.25
                    Text(text = "标准", fontSize = 13.sp, color = Color(0xff999999))  // 1.0
                    Text(text = "普大", fontSize = 13.sp, color = Color(0xff999999))  // 1.25
                    Text(text = "超大", fontSize = 13.sp, color = Color(0xff999999))  // 1.5
                    Text(text = "特大", fontSize = 13.sp, color = Color(0xff999999))  // 1.75
                }

                Spacer(modifier = Modifier.height(30.dp))
            }
        }, sheetPeekHeight = 0.dp
    ) { paddingValue ->
        Column(
            modifier = Modifier
                .padding(paddingValue)
                .fillMaxWidth()
                .fillMaxHeight()
        ) {
            // WebView(rememberWebViewState(data = viewModel.content))
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                // WebView(webViewState)
                WebView(webViewState)
                if (viewModel.loadArticleInfoIng) {
                    CircularProgressIndicator(
                        color = Color(0xff149ee7),
                    )
                }
            }
        }

    }
}

@Preview
@Composable
fun ArticleDetailScreenPreview() {
    ArticleDetailScreen()
}